// import { List } from 'antd-mobile';
import React, { Component } from 'react';
// import pic from '../assets/002.jpg'
// 导入请求
import { classification } from '../api'
//导入并执行css样式
import "../styles/MyEntry.css"

//class组件中，任何一个方法都可以通过this获取当前组件实例
class MyEntry extends Component {
    constructor(props) {//props：父组件给子组件传值用它接收
        super(props);//作用：调用父类构造函数
        // 一般在这个方法中 发送ajax请求,创建定时器，监听事件

        // // 初始化组件状态(数据)
        this.state = {
            MyEntry: [
                // { pic, name: '护肤' }, { pic, name: '彩妆' }, { pic, name: '香氛' }, { pic, name: '进口酒' }, { pic, name: '国产酒' }, { pic, name: '精品奢货' }, { pic, name: '食品百货' }, { pic, name: '母婴专区' }, { pic, name: '直播专区' }, { pic, name: '特卖专场' }
            ]
        }
    }
    //定义组件的方法和render写在同级即可

    componentDidMount() {
        classification().then((res) => {
            console.log(res.data.list);
            this.setState({ MyEntry: res.data.list })
        })
    }
    //render方法负责组件内容的渲染
    render() {
        return (
            <div className='MyEntry'>
                <div className='box1'>1分抵1元。请你点击此处查看《购物须知》。</div>
                {
                    //列表渲染过程中每个列表项必须有一个唯一的key值
                    this.state.MyEntry.map((item, index) => {
                        return (
                            <div className='item' key={index}>
                                <img src={item.pic} alt="" />
                                <div className='name'>{item.name}</div>
                            </div>
                        )
                    })
                }

                {
                    //如果列表为空，显示，提示标签(条件渲染)
                    this.state.MyEntry.length == 0 &&
                    <div className='empty'>网络异常，请尝试刷新页面</div>
                }

            </div>
        );
    }
}

export default MyEntry;